<template>
  <div >



    <div class="myArticle" ref="myArticle">
      <div v-html="article.content" >

      </div>
    </div>
    <div style="    text-align: center;
    position: absolute;
    bottom: 15%;
    width: 100%;">

      <pay-button :money="article.price"
                  @pay-failed="setNoOk"
                  @pay-ok="payOk"
                  v-show="isShowPayButton">支付{{article.price}}元看全文
      </pay-button>
    </div>

  </div>
</template>
<style>
  .share-mask {
    position: absolute;
    background: rgba(4, 4, 4, 0.76);
    width: 100%;
    height: 100%;
    z-index: 10000;
  }
</style>
<script>
  import {addUserToPayedList, getArticle} from '../api/api'
  import PayButton from './common/PayButton'
  import PayedUserList from './common/PayedUserList'
  import {Popup} from 'mint-ui'

  export default {
    name: 'article-viewer',
    components: {Popup, PayButton, PayedUserList},
    mounted() {

      this.init();

    },
    watch:{
      hasPayed(){
        this.init();
      }
    },

    props: {
      hasPayed:{
        type:Boolean,
        default:false
      },
      article: {
        type: Object,
        default: function () {
          return {
            content: '',
            title: '',
            price: 0,
            id: ''
          };

        }
      }
    },
    data() {
      return {
        isShowPayButton: true,
        popupVisible: false


      }
    },
    methods: {

      init(){
        if(this.hasPayed){
          this.setOk();
        }else{
          this.setNoOk();
        }

      },




      setOk() {
        let article = this.$refs.myArticle;
        let total_height = this.$refs.myArticle.scrollHeight;
        article.style.height = total_height+'px';
        article.style.filter = 'blur(0px)'

        this.isShowPayButton = false;
      },
      setNoOk() {
        let article = this.$refs.myArticle;
        let total_height = this.$refs.myArticle.scrollHeight;
        article.style.height = total_height / 2 + 'px';
        article.style.filter = 'blur(6px)'
        this.isShowPayButton = true;
      },
      payOk(orderId) {
        this.setOk();
        let vm = this;
        let user = JSON.parse(sessionStorage.getItem('user'));
        addUserToPayedList({
          orderId: orderId,
          openid: sessionStorage.getItem('openid'),
          articleId: vm.article.id,
          headimgurl: user.headimgurl
        }).then((res) => {

          if (res.data.result) {

            vm.$emit('change-payed-user-list');
          }else{
            vm.setNoOk();
          }
        });


      }
    }
  }
</script>

<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
  }

  .myArticle {
    filter: blur(6px);
    width: 97% ;
    overflow-x: hidden;
    height: 100% !important;
    overflow-y: hidden;
  }


</style>
